<template>
	<view v-if="list && list.length > 0" class="cu-card dynamic" :class="props.isCard?'no-card':''">
		<view v-for="(item, index) in list" :key="index" :data-index="index" :data-value="item" @click="handleSelect"
			class="cu-item shadow">
			<view class="card-content">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg"
							style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
						</view>
						<view class="content flex-sub">
							<view>知识专家</view>
							<view class="text-gray text-sm">
								2019年12月3日
								<text class="margin-left-xs cu-tag round bg-grey">文章</text>
								<text class="margin-left-xs">￥ 5.00</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-content padding-left">
					折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
				</view>
				<view class="grid flex-sub padding-lr" :class="props.isCard?'col-3 grid-square':'col-1'">
					<view class="bg-img" :class="props.isCard?'':'only-img'"
						style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"
						v-for="(item,index) in props.isCard?9:1" :key="index">
					</view>
				</view>
				<view class="flex">
					<view class="flex-sub text-gray text-sm text-center padding">
						<text class="cuIcon-attentionfill margin-lr-xs"></text> 分享
					</view>
					<view class="flex-sub text-gray text-sm text-center padding">
						<text class="cuIcon-messagefill margin-lr-xs"></text> 30
					</view>
					<view class="flex-sub text-gray text-sm text-center padding">
						<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: Array
	});
	const handleSelect = (e: any) => {
		emit('action', e.currentTarget.dataset.value);
	};
</script>

<style>
	.card-content {
		border: 1px solid #efefef;
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	/* .cu-item {
		border: 1px solid #efefef;
	}

	.cu-card>.cu-item {
		display: block;
		background-color: #ffffff;
		overflow: hidden;
		border-radius: 10rpx;
	} */
</style>
